<template>
<div>
  <h3 class="v-hd3">
    <span class="txt">私信</span>
    <a href="#" class="mail">发新私信</a>
  </h3>
  <div class="j-flag-tip">
    <div class="n-msgnt-tip">
      【新歌发布】功能已升级并迁移至【关注】
      <a href="#" class="s-f7">去体验</a>
    </div>
  </div>
  <div class="n-msgnt">
    <div class="item" v-for="(item,index) in msgs" :key="index" @click="toView(item.fromUser.userId,item.fromUser.nickname)">
      <div class="ava">
        <router-link :to="{name:'UserDetailView',params:{id:item.fromUser.userId,type:1}}" :title="item.fromUser.nickname">
          <img v-lazy="item.fromUser.avatarUrl"
               alt="">
        </router-link>
        <i class="u-bub">
        </i>
      </div>
      <div class="cont">
        <div class="sec1">
          <div class="time">{{formatDate(item.lastMsgTime)}}
            <i class="u-icon-13"></i>
          </div>
          <div class="mn">
            <router-link :to="{name:'UserDetailView',params:{id:item.fromUser.userId,type:1}}" class="f-fw1" :title="item.fromUser.nickname">{{item.fromUser.nickname}}</router-link>
            <span class="u-icn-new-wrap">
                      <img class="u-icon-14"
                           :src="item.fromUser.avatarDetail.identityIconUrl"
                           alt="">
                    </span>
          </div>
        </div>
        <div class="sec2 f-thlde">
          <div class="oper">
                    <span class="dlt">
                      <a href="#" class="s-fi2">删除</a>
                    </span>
          </div>
          <p class="f-thlde" v-html="JSON.parse(item.lastMsg).msg">
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {formatDate} from "@/utils/formatDate";

export default {
  name: "index",
  data() {
    return {
      msgs:[],
      formatDate:formatDate
    }
  },
  methods:{
    toView(id,name){
      this.$router.push({name:'MsgView',query:{id:id,nickname:name}})
    },
    async getUserMsg(){
      let result = await this.$API.reqUserMsg(this.$store.state.track.user.cookies)
      if (result.data.code==200){
        this.msgs = result.data.msgs
      }
    },

  },
  mounted() {
    this.getUserMsg()
  }
}
</script>

<style scoped lang="less">
.v-hd3 {
  height: 35px;
  border-bottom: 2px solid #d13030;

  .txt {
    font-size: 14px;
    font-weight: bold;
    line-height: 35px;
    float: left;
  }

  .mail {
    float: right;
    font-weight: normal;
    width: 89px;
    height: 31px;
    color: #333;
    background-position: 0 -680px;
    text-indent: 31px;
    line-height: 30px;
    display: inline-block;
    background-image: url("../../../../assets/button.png");
  }
}

.j-flag-tip {
  .n-msgnt-tip {
    display: block;
    color: #666;
    background: #fffcdf;
    border: 1px solid #f0eb98;
    padding: 8px 0;
    text-align: center;
    letter-spacing: 1px;

    .s-f7 {
      color: #0c73c2;
    }
  }
}

.n-msgnt {
  margin-bottom: 40px;
  margin-top: 1px;

  .item {
    padding: 16px 0;
    border-bottom: 1px dotted #ccc;
    cursor: pointer;
    &:hover .cont .sec2 .oper {
      display: block;
    }

    .ava {
      width: 50px;
      height: 50px;
      float: left;
      position: relative;
      zoom: 1;
      margin-right: -100px;

      a {
        img {
          width: 50px;
          height: 50px;
        }
      }

      .u-bub {
        position: absolute;
        top: -7px;
        left: -8px;

        em {
          float: none;
          display: block;
          position: relative;
          text-align: center;
          z-index: 2;
        }
      }
    }

    .cont {
      margin-left: 70px;
      line-height: 21px;

      .sec1 {
        .time {
          color: #999;
          float: right;
          font-family: Tahoma, Geneva, sans-serif;

          .u-icon-13 {
            position: relative;
            margin: -4px 8px 0 2px;
            width: 13px;
            height: 13px;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background-image: url("../../../../assets/icon.png");
            background-position: -18px -682px;
            margin-right: 0;
          }
        }

        .mn {
          .f-fw1 {
            color: #000;
            font-weight: bold;
            font-size: 14px;
          }

          .u-icn-new-wrap {
            position: relative;
            display: inline-block;
            width: 15px;
            height: 15px;
            margin: 2px 0 0 2px;
            vertical-align: top;

            .u-icon-14 {
              top: 0;
              left: 0;
              width: 15px;
              height: 15px;
            }
          }
        }
      }

      .sec2 {
        width: 100%;
        margin-top: 3px;
        color: #999;

        .oper {
          display: none;
          float: right;
          text-align: right;
          font-family: Tahoma, Geneva, sans-serif;

          .dlt {
            //visibility: hidden;
            .s-fi2 {
              color: #0c73c2;
            }
          }
        }
      }
    }
  }
}
</style>